<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>油枪号</title>
		<meta http-equiv="Content-type" content="textml; charset=utf-8" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="x5-orientation" content="portrait">
		<meta name="screen-orientation" content="portrait">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=yes">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="icon" href="data:;base64,=">
		<link rel="stylesheet" type="text/css" href="//img.ejiayou.com/activity/pages/ejiayoupay/ejiayou/css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/oil_gun.css" />
		<style type="text/css">
			[v-cloak] {
				display: none!important;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="load_end" v-if="!loadEnd"></div>
			<van-cell>可选油枪号</van-cell>
			<div class="gun_box" :class="'gun_box_'+index" v-for="(item, index) in gun_list_all">
				<div class="gun_box_content">
					<div class="gun_item" :class="gun_item.had_selected?'had_active':gun_item.selected?'active':''" v-for="(gun_item, gun_index) in gun_list_all[index]" @click="selectGunItem(gun_item)">
						<img :src="gun_item.had_selected?'https://img.ejiayou.com/activity/jiguang_upload/img/icon_add_x.png':gun_item.selected?'https://img.ejiayou.com/activity/jiguang_upload/img/icon_plus.png':'https://img.ejiayou.com/activity/jiguang_upload/img/icon_plus_n.png'">
						<span>{{gun_item.id}}</span>
					</div>
				</div>
				
			</div>
			<div class="icon_plus_box" @click="addGunItem">
				<van-button icon="plus" plain  type="info">添加油枪号</van-button>
			</div>
			
			<div class="submit_box" @click="submitOilGun">
				<van-button round block type="info" native-type="submit">确定</van-button>
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://img.ejiayou.com/activity/js/common/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="" type="text/javascript" charset="utf-8"></script>
		<script src="js/vant.min.js"></script>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/area.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			eval(function(p, a, c, k, e, r) {
				e = function(c) {
					return c.toString(a)
				};
				if (!''.replace(/^/, String)) {
					while (c--) r[e(c)] = k[c] || e(c);
					k = [function(e) {
						return r[e]
					}];
					e = function() {
						return '\\w+'
					};
					c = 1
				};
				while (c--)
					if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
				return p
			}('(6(a,d){j b=a.i,e="3"f 5?"3":"9",c=6(){b.7.8=(2>b.4?b.4:2)/2*g+"h"};a.0&&(d.0(e,c,!1),a.0("k",c,!1))})(l,5);',
				22, 22,
				'addEventListener||750|orientationchange|clientWidth|window|function|style|fontSize|resize||||||in|64|px|documentElement|var|DOMContentLoaded|document'
				.split('|'), 0, {}))
		</script>
		<script>
			
			 Array.prototype.flat = function(){
				var arr = [];
				this.forEach((item)=>{
					if(Array.isArray(item)){
						  arr=arr.concat(item.flat());//如果是数组的话继续循环
					}else{
						  arr.push(item)
					}
			  })
			  return arr
			}
			var oil_code_id = getQueryVariable('oil_code_id') || 1
			var oilInfo = JSON.parse(localStorage.getItem('ejy_oilInfo'))
			var look_gd = getQueryVariable('look_gd') || ''
			// 在 #app 标签下渲染一个按钮组件
			new Vue({
				el: '#app',
				data: {
					loadEnd: false,
					gun_list: [],
					gun_box_array: 1,
					gun_array_selectArr: [],
					look_gd: look_gd
				},
				created() {
					var gun_list = []
					var gun_array = []
					var gun_box_array = []
					var gun_array_select = ''
					
					var arr_length = 0
					for(var n = 0; n < oilInfo.length; n++) {
						if(oil_code_id == oilInfo[n].oilId) {
							// arr_length = Math.max.apply(null,oilInfo[m].oilgunCode.split(','))
							document.title =  oilInfo[n].name+'油枪号'
							// arr_length =  Math.ceil(arr_length/16)*16
							
						}else{
							if(oilInfo[n].oilgunCode) {
								gun_array_select += ',' + oilInfo[n].oilgunCode
							}
							
						}
					}
					this.gun_array_selectArr = gun_array_select.split(',')
					for(var m = 0; m < oilInfo.length; m++) {
						if(oil_code_id == oilInfo[m].oilId && oilInfo[m].oilgunCode) {
							arr_length = Math.max.apply(null,oilInfo[m].oilgunCode.split(','))
							arr_length =  Math.ceil(arr_length/16)*16
							gun_array = oilInfo[m].oilgunCode.split(',')
						}else{
							
						}
					}
					var gun_array_length = arr_length || 16
					var gun_box_array_length = Math.ceil(gun_array_length/16)
					for(var i = 0; i < gun_box_array_length; i++) {
						gun_box_array.push([])
					}
					for(var m = 0; m < gun_box_array_length; m++) {
						for(var n = 16*m; n < gun_array_length; n++) {
							
							if(n == (16*(m+1))) {
								break
							}
							if(this.gun_array_selectArr.indexOf(n+1+"")!=-1) {
								gun_box_array[m].push({
									selected: true,
									had_selected: true,
									id: n+1
								})
							}else{
								if(gun_array.indexOf(n+1+"")!=-1) {
									gun_box_array[m].push({
										selected: true,
										had_selected: false,
										id: n+1
									})
								}else{
									gun_box_array[m].push({
										selected: false,
										had_selected: false,
										id: n+1
									})
								}
							}
							
							
						}
					}
					this.gun_list_all = gun_box_array
					this.loadEnd = true
				},
				methods: {		
					selectGunItem: function(gun_item) {
						if(look_gd) {
							return
						}
						if(gun_item.had_selected) {
							vant.Toast('该油枪已被其他油品选择')
							return
						}
						this.$set(gun_item, 'selected', !gun_item.selected)
						console.log(gun_item)
						this.$forceUpdate()
						
					},
					addGunItem: function() {
						if(look_gd) {
							return
						}
						var self = this
						var gun_list_other = []
						var gun_list_length = this.gun_list_all.length*16
						for(var a = gun_list_length; a < gun_list_length+16; a++) {
							if(this.gun_array_selectArr.indexOf(a+1+"")!=-1) {
								gun_list_other.push({
									selected: true,
									had_selected: true,
									id: a+1
								})
							}else{
								gun_list_other.push({
									selected: false,
									had_selected: false,
									id: a+1
								})
							}
							
						}
						this.gun_list_all.push(gun_list_other)
						this.$forceUpdate()
						this.$nextTick(function() {
							self.handleScroll(self.gun_list_all.length)
						})
					},
					handleScroll: function(num) {
						document.documentElement.scrollTop = document.body.scrollTop = $('.gun_box').height()*num
					},
					// 提交油枪号
					submitOilGun: function() {
						var json_list = JSON.parse(localStorage.getItem('ejy_json_list'))
						var obj = cloneLoop(this.gun_list_all.flat())
						var arr_selected = []
						for(var i in obj) {
							if(obj[i].selected && !obj[i].had_selected) {
								arr_selected.push(obj[i].id)
							}
						}
						var selected_oil_gun = arr_selected.join(',')
						for(var m = 0; m < oilInfo.length; m++) {
							if(oil_code_id == oilInfo[m].oilId) {
								oilInfo[m].oilgunCode = selected_oil_gun
							}
						}
						localStorage.setItem('ejy_oilInfo', JSON.stringify(oilInfo))
						// return
						location.replace(decodeURIComponent(getQueryVariable('reback_url')))
					},
				}
			});
			Vue.use(vant.Lazyload);
		</script>
	</body>
</html>
